<template>
    <div class="platformContainer">
        <el-card shadow="always" class="header_card">
            <el-form :inline="true" :model="formInline">
                <el-form-item label="角色名称">
                    <el-input v-model="formInline.user" placeholder="请输入角色名称"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="formInline.region" placeholder="角色状态">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="角色类型">
                    <el-select v-model="formInline.region" placeholder="角色类型">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="创建时间" v-if="createTimeShow">
                    <div class="block">
                        <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
                    </div>
                </el-form-item>
                <el-form-item :class="[changed ? 'btnStyle' : '']">
                    <el-row :gutter="20">
                        <el-col :span="8"><el-button type="primary">搜索</el-button></el-col>
                        <el-col :span="8"><el-button>重置</el-button></el-col>
                        <el-col :span="8"><el-button @click="change">更多<i
                                    :class="[changed ? 'el-icon-arrow-up' : 'el-icon-arrow-down']"></i></el-button></el-col>
                    </el-row>
                </el-form-item>
            </el-form>
        </el-card>
        <div class="content">
            <el-descriptions title="角色信息" :colon="false">
                <template slot="extra">
                    <el-button type="primary" @click="openDialog1"><i class="el-icon-plus"></i>新增商家角色</el-button>
                    <el-button type="primary" @click="openDialog2"><i class="el-icon-plus"></i>新增员工角色</el-button>
                </template>
            </el-descriptions>
            <div class="table" style="width: 99%;">
                <el-table :data="tableData" :header-cell-style="headerRowStyle2" class="tag6_table" height="7rem">
                    <el-table-column prop="date" label="角色编号">
                    </el-table-column>
                    <el-table-column prop="name" label="角色名称">
                    </el-table-column>
                    <el-table-column prop="state" label="角色类型">
                        <template slot-scope="scope">
                            <el-tag type="warning" v-if="scope.row.role === '1'">员工角色</el-tag>
                            <el-tag v-if="scope.row.role === '0'">商家角色</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="operate" label="显示顺序">
                    </el-table-column>
                    <el-table-column prop="operate" label="状态">
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.state" active-color="blue" inactive-color="#ff4949"
                                active-value="1" inactive-value="0">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column prop="operate" label="创建时间">
                    </el-table-column>
                    <el-table-column prop="operate" label="操作">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="text" size="small">修改</el-button>
                            <el-button type="text" style="color:red" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>

        <el-dialog title="添加商家角色" :visible="dialog1" width='40%' :before-close="handleClose1">
            <el-form :model="form" label-width="1rem">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="角色名称">
                            <el-input v-model="formInline.user" placeholder="请输入角色名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="角色顺序">
                            <el-input-number v-model="num" controls-position="right" :min="1" :max="10"></el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item>
                            <span style="color:red;font-weight: bold;">注:为下级商家分配菜单以及按钮权限</span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="4">
                        <el-form-item>
                            <el-checkbox v-model="checked">展开/折叠</el-checkbox>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item>
                            <el-checkbox v-model="checked">全选/全不选</el-checkbox>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item>
                            <el-checkbox v-model="checked">父子联动</el-checkbox>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item>
                            <div class="box">
                                <el-tree :data="data" show-checkbox node-key="id" :default-expanded-keys="[2, 3]"
                                    :default-checked-keys="[5]" :props="defaultProps">
                                </el-tree>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="状态">
                            <span class="stateBox normal" @click="checkState(true)"
                                :style="{ backgroundColor: (flag ? '#3370ff' : 'white'), color: (flag ? 'white' : 'black') }">正常</span>
                            <span class="stateBox quit" @click="checkState(false)"
                                :style="{ backgroundColor: (flag ? 'white' : '#3370ff'), color: (flag ? 'black' : 'white') }">停用</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="备注">
                            <el-input placeholder="请输入内容"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialog1 = false">取 消</el-button>
                <el-button type="primary" @click="dialog1 = false">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="添加员工角色" :visible="dialog2" width='40%' :before-close="handleClose2">
            <el-form :model="form" label-width="1rem">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="角色名称">
                            <el-input v-model="formInline.user" placeholder="请输入角色名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="角色顺序">
                            <el-input-number v-model="num" controls-position="right" :min="1" :max="10"></el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item>
                            <span style="color:red;font-weight: bold;">注:为员工分配菜单以及按钮权限。 员工角色不具有用户管理、设备报表、角色管理功能。</span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="4">
                        <el-form-item>
                            <el-checkbox v-model="checked">展开/折叠</el-checkbox>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item>
                            <el-checkbox v-model="checked">全选/全不选</el-checkbox>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item>
                            <el-checkbox v-model="checked">父子联动</el-checkbox>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item>
                            <div class="box">
                                <el-tree :data="data" show-checkbox node-key="id" :default-expanded-keys="[2, 3]"
                                    :default-checked-keys="[5]" :props="defaultProps">
                                </el-tree>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="状态">
                            <span class="stateBox normal" @click="checkState(true)"
                                :style="{ backgroundColor: (flag ? '#3370ff' : 'white'), color: (flag ? 'white' : 'black') }">正常</span>
                            <span class="stateBox quit" @click="checkState(false)"
                                :style="{ backgroundColor: (flag ? 'white' : '#3370ff'), color: (flag ? 'black' : 'white') }">停用</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="备注">
                            <el-input placeholder="请输入内容"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialog2 = false">取 消</el-button>
                <el-button type="primary" @click="dialog2 = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>

export default {
    data() {
        return {
            formInline: {},
            headerRowStyle2: {
                'backgroundColor': '#f8f8f9',
                'color': 'black'
            },
            changed: false,
            createTimeShow: false,
            dialog1: false,
            dialog2: false,
            num: 0,
            roleManageList: [
            ],
            tableData: [
                {
                    date: 1,
                    state: '0',
                    role: '0'
                },
                {
                    date: 2,
                    state: '1',
                    role: '1'
                }
            ],
            data: [{
                id: 1,
                label: '一级 1',
                children: [{
                    id: 4,
                    label: '二级 1-1',
                    children: [{
                        id: 9,
                        label: '三级 1-1-1'
                    }, {
                        id: 10,
                        label: '三级 1-1-2'
                    }]
                }]
            }, {
                id: 2,
                label: '一级 2',
                children: [{
                    id: 5,
                    label: '二级 2-1'
                }, {
                    id: 6,
                    label: '二级 2-2'
                }]
            }, {
                id: 3,
                label: '一级 3',
                children: [{
                    id: 7,
                    label: '二级 3-1'
                }, {
                    id: 8,
                    label: '二级 3-2'
                }]
            }],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            flag: true,
        }
    },
    methods: {
        change() {
            //更换图标
            this.changed = !this.changed
            //切换是否显示
            this.createTimeShow = !this.createTimeShow
        },
        openDialog1() {
            console.log('111');
            this.dialog1 = true
        },
        openDialog2() {
            this.dialog2 = true
        },
        handleClose1() {
            this.dialog1 = false
        },
        handleClose2() {
            this.dialog2 = false
        },
        addNum() {
            this.num++
        },
        checkState(flag) {
            this.flag = !this.flag
        }
    },
    // 使用
    mounted() {
        this.$nextTick(() => {
        });
    },
}
</script>
<style scoped>
.platformContainer {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.header_card {
    margin-bottom: 20px;
}

::v-deep .el-form-item {
    margin-bottom: 0 !important;
}

.content {
    padding: .25rem;
}

::v-deep .el-descriptions__header {
    justify-content: flex-start;
}

::v-deep .el-descriptions__title {
    margin-right: .25rem;
}

::v-deep .el-date-editor .el-range-separator {
    width: 7% !important;
}

.btnStyle {
    float: right;
}

.btnStyle::before {
    clear: both;
}

@media screen and (max-width: 1600px) {
    .btnStyle {
        padding: .125rem .75rem .125rem 0;
    }
}

.box {
    border: 1px solid #ccc;
    border-radius: .125rem;
    padding: .125rem;
    margin-bottom: .25rem;
}

.stateBox {
    display: inline-block;
    width: 55px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border: 1px solid #ccc;
    cursor: pointer;
}

.normal {
    border-radius: 5px 0 0 5px;
    border-right: none;
}

.quit {
    border-radius: 0 5px 5px 0;
}


</style>